<template>
    <div class="studentAdd">
        <el-form ref="form" :model="form" label-width="60px">
            <el-form-item prop="name" label="姓名" :rules="{
            required: true, message: '姓名不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="major" label="专业" :rules="{
            required: true, message: '专业不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.major"></el-input>
            </el-form-item>
            <el-form-item prop="height" label="身高" :rules="{
            required: true, message: '身高不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.height"></el-input>
            </el-form-item>
            <el-form-item prop="weight" label="体重" :rules="{
            required: true, message: '体重不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.weight"></el-input>
            </el-form-item>
            <el-form-item prop="date" label="日期" :rules="{
            required: true, message: '日期不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.date"></el-input>
            </el-form-item>
            <el-form-item prop="school" label="学校" :rules="{
            required: true, message: '学校不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.school"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="地址" :rules="{
            required: true, message: '地址不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item prop="class" label="班級" :rules="{
            required: true, message: '班級不能为空', trigger: 'blur'
            }">
                <el-input v-model="form.class"></el-input>
            </el-form-item>
            <el-form-item style="position:absolute;bottom:-100px;left:0px;">
                <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                <router-link to="/home/student">
                    <el-button>取消</el-button>
                </router-link>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
        name: '',
        major: '',
        height: '',
        weight: '',
        date: '',
        school: '',
        address: '',
        class:'',
        form: {
          name: '',
          major: '',
          height: '',
          weight: '',
          date: '',
          school: '',
          address: '',
          class:'',
          },
        tableData:[]
        }
    },
    created(){
        let abc = JSON.parse(localStorage.getItem('Data')) || []
        this.tableData = abc
        console.log(this.tableData)
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.tableData.push(this.form)
                    localStorage.setItem('Data', JSON.stringify(this.tableData))
                    this.$router.push('/home/student')
                } else {
                    alert("创建失败")
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss">
    .studentAdd{
        .el-main{
            width:400px;

        }
        label{
            position: relative;
            top:30px;
            font-size:16px;
        }
        input{
            margin-top:25px;
            width:600px;
            height:50px;
            border-radius:10px;
        }
        .el-form{
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .el-form-item__error{
            margin-left:100px;
            font-size:14px;
        }
        .el-form-item{
            text-align: left;
        }
    }
</style>